<template>
  <el-card class="box-card">
    <el-form ref="from" label-width="80px">
      <el-form-item></el-form-item>
      <el-form-item label="SKU名称">
        <el-input v-model="infoList.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="infoList.price"></el-input>
      </el-form-item>
      <el-form-item label="重量">
        <el-input v-model="infoList.weight"></el-input>
      </el-form-item>
      <el-form-item label="SKU描述">
        <el-input v-model="infoList.skuDesc"></el-input>
      </el-form-item>
      <!-- 平台属性 -->
      <el-form-item label="平台属性">
        <el-form-item
          v-for="(list, index) in spuAttrValue"
          :key="list.id"
          :label="list.attrName"
        >
          <el-select
            placeholder="活动区域"
            v-model="infoList.skuAttrValueList[index]"
          >
            <el-option
              :label="item.valueName"
              :value="
                `${list.id}:${list.attrName}:${item.id}:${item.valueName}`
              "
              v-for="item in list.attrValueList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
      <!-- 销售属性 -->
      <el-form-item label="销售属性">
        <el-row>
          <el-col
            v-for="(saleAttr, index) in spuAttrSaleValue"
            :key="saleAttr.baseSaleAttrId"
            :xs="24"
            :sm="12"
            :md="8"
            class="add-sku-col"
          >
            <el-form-item :label="saleAttr.saleAttrName">
              <el-select
                placeholder="请选择销售属性值"
                v-model="infoList.skuSaleAttrValueList[index]"
              >
                <el-option
                  v-for="item in saleAttr.spuSaleAttrValueList"
                  :value="
                    `${saleAttr.id}:${saleAttr.saleAttrName}:${item.id}:${item.saleAttrValueName}`
                  "
                  :label="item.saleAttrValueName"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- 图片表格 -->
      <el-form-item label="SKU图片">
        <el-table
          ref="multipleTable"
          :data="spuAttrImageList"
          tooltip-effect="dark"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="图片">
            <template v-slot="{ row }">
              <img :src="row.imgUrl" :alt="row.imgName" style="width:100px" />
            </template>
          </el-table-column>

          <el-table-column label="名称" prop="imgName"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                type="primary"
                style="font-size: 12px"
                size="mini"
                v-show="row.isDefault === '0'"
                @click="isDefault(row)"
              >
                设置为默认图片
              </el-button>
              <el-button
                type="success"
                size="mini"
                disabled
                v-show="row.isDefault === '1'"
              >
                默认图片
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import {
  getImageList,
  getSpuSaleList,
  getInfoList,
  addSpuSale
} from '@/api/spu'
import { mapState } from 'vuex'

export default {
  name: 'Updatespu',
  data() {
    return {
      infoList: {
        // category3Id: 0, //三级id
        price: '', //价格
        skuAttrValueList: [
          //平台属性
        ],
        skuDefaultImg: '', //默认图片
        skuDesc: '', //描述
        skuImageList: [
          //图片状态列表
        ],
        skuName: '', //名称
        skuSaleAttrValueList: [
          //销售属性
        ],
        weight: ''
      },
      spuAttrValue: [],
      spuAttrSaleValue: [],
      spuAttrImageList: []
    }
  },
  async mounted() {
    let res1 = await getImageList(this.spuSaleId)
    let res2 = await getSpuSaleList(this.spuSaleId)
    let res3 = await getInfoList({
      category1Id: this.cartGory1Id,
      category2Id: this.cartGory2Id,
      category3Id: this.cartGory3Id
    })
    this.spuAttrImageList = res1
    this.spuAttrImageList = this.spuAttrImageList.map(item => {
      item.isDefault = '0'
      return item
    })
    this.spuAttrSaleValue = res2
    this.spuAttrValue = res3
  },
  methods: {
    //更改默认图片
    isDefault(row) {
      this.spuAttrImageList = this.spuAttrImageList.map(item => {
        item.isDefault = '0'
        return item
      })
      row.isDefault = '1'
      this.infoList.skuDefaultImg = row.imgUrl
    },
    //选中图片列表
    handleSelectionChange(val) {
      console.log(val)
      this.infoList.skuImageList = val.map(item => {
        let obj = {
          imgName: item.imgName,
          imgUrl: item.imgUrl,
          isDefault: item.isDefault,
          spuId: item.spuId,
          id: item.id
        }
        return obj
      })
    },
    //取消
    cancel() {
      this.$emit('update:visible', 0)
    },
    //提交
    async submit() {
      let { cartGory3Id: category3Id, spuSaleId: spuId } = this
      let {
        price,
        skuAttrValueList,
        skuDefaultImg,
        skuDesc,
        skuImageList,
        skuName,
        weight,
        skuSaleAttrValueList
      } = this.infoList
      let obj = {
        category3Id,
        price,
        skuAttrValueList: skuAttrValueList.filter(Boolean).map(attr => {
          const [attrId, attrName, valueId, valueName] = attr.split(':')
          return {
            attrId,
            attrName,
            valueId,
            valueName
          }
        }),
        skuDefaultImg,
        skuDesc,
        skuImageList,
        skuName,
        skuSaleAttrValueList: skuSaleAttrValueList
          .filter(Boolean)
          .map(saleAttr => {
            const [
              saleAttrId,
              saleAttrName,
              saleAttrValueId,
              saleAttrValueName
            ] = saleAttr.split(':')
            return {
              saleAttrId,
              saleAttrName,
              saleAttrValueId,
              saleAttrValueName
            }
          }),
        spuId,
        weight
      }
      await addSpuSale(obj)
      this.$message({
        message: '添加成功',
        type: 'success'
      })
      this.$emit('update:visible', 0)
    }
  },
  computed: {
    ...mapState('spu', ['spuSaleId']),
    ...mapState('cartgory', ['cartGory1Id', 'cartGory2Id', 'cartGory3Id'])
  }
}
</script>

<style scoped>
.box-card {
  margin: 10px;
}
</style>
